<template>
    <div id="Write">

        <div id="middle-nav">
            <ul>
                <li>当前位置:</li>
                <li>发表</li>
                <li>></li>
                <li>写心情</li>
            </ul>
        </div>
        <div id="write-content" :key="componentKey">
            <div id="autordata">
                <div id="talkautor" class="all">
                    <span>作者：</span>
                    <input type="text" v-model="feelingData.autorName">              
                </div>
                <div id="talkimg" class="all">
                    <span>头像：</span>
                    <span>
                        <li v-for="imgitem in headimgdata" @click="imgchange(imgitem)" ::key="imgitem.id">
                            <img class="headimg" :src="imgitem.headimgurl">
                            <label :class="{act :(imgitem.id) == (imgId)}">
                                <i :class="{acti:(imgitem.id) == (imgId)}"></i>
                            </label>
                        </li>
                    </span>
                </div>
            </div>
            <!-- 发表说说 -->
            <div>
                <textarea name="" id="" rows="8" placeholder="来记录一下你的心情吧！！！" v-model="feelingData.textdata"></textarea>

                <el-upload action="https://icetea.vip/api/file/uploadImage" list-type="picture-card"
                    class="avatar-uploader" :on-success="asa">
                    <i class="el-icon-plus"></i>

                </el-upload>

            </div>
            <button @click="publish">快速发布</button>
            

        </div>




    </div>

</template>

<script>

    export default {
        name: "Write",
        data() {
            return {
                feelingData: {
                    imageUrl: [],
                    textdata: "",
                    time: "",
                    autorName: "",
                    headimg: "",
                },
                imgId: "",
                headimgdata: [
                    { headimgurl: require("../assets/images/headerimg02.webp"), id: 1 },
                    { headimgurl: require("../assets/images/headerimg01.webp"), id: 2 },
                    { headimgurl: require("../assets/images/headerimg03.webp"), id: 3 },
                    { headimgurl: require("../assets/images/headerimg04.webp"), id: 4 },
                    { headimgurl: require("../assets/images/headerimg05.webp"), id: 5 }
                ],
                componentKey: 0,

            }
        },
        methods: {
            asa(response) {
                console.log(response)
                this.feelingData.imageUrl.push(response.msg)
                // alert("上传成功！")

            },
            //获取当前时间
            getTime(){
                let date = new Date()
                console.log(date)
                let year = date.getFullYear()
                console.log("年"+year)
                let month = date.getMonth() + 1
                console.log("月"+month)
                let day = date.getDate()
                console.log("ri"+day)
                let time = year + "-" + month + "-" + day
                console.log("时间"+time)
                console.log("时间而"+JSON.stringify(this.feelingData))
                this.feelingData.time = time
                console.log("时间而"+this.feelingData.time)
            },
            //头像图片选择
            imgchange(arr) {
                let newArr = arr
                // console.log(newArr)
                this.imgId = newArr.id
                this.feelingData.headimg = newArr.headimgurl
            },
            //发表说说
            publish() {
                this.getTime() 
                if (this.feelingData.textdata !== "") {
                    fetch(process.env.VUE_APP_API_URL+"/feeling", {
                        method: 'post',
                        body: JSON.stringify(this.feelingData),
                        headers: new Headers({
                            'Content-Type': 'application/json'
                        })
                    })
                        .then((res) => {
                            return res.json()
                            // console.log(res.json())
                        })
                        .then((data) => {
                            console.log(data)
                            if (data == "发布成功") {
                                alert("发布成功!!!")
                                // console.log(this)
                                // this.componentKey += 1;
                                // this.feelingData.time=""
                                // Object.assign(this.$data.feelingData, this.$options.data().feelingData)
                                this.$router.push("/PcIndex/FrontPage")
                            }
                        })
                        .catch((error) => { console.error('Error:', error) })

                } else {
                    alert("请输入内容！！")
                }



            }
        },


    }
</script>

<style>
    #middle-nav {
        background-color: white;
        color: gray;
        
    }

    #middle-nav>ul {
        vertical-align: middle;
    }

    #middle-nav>ul>li {
        float: left;
        margin: 10px 0 10px 10px;

    }

    #middle-nav>ul>li:first-child {
        padding-right: 10px;
        padding-left: 10px;

    }

    #write-content {
        
        margin-top: 5px;
        /* background-color: white; */
        /* display: inline-block;
        text-align: center; */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #write-content>div:first-child {
        margin: 10px;
        background-color: rgba(193, 186, 186, 0.272);
        display: inline-block;
    }

    .avatar-uploader /deep/ {
        /* display: inline-block; */
        background-color: rgba(193, 186, 186, 0.272);
    }

    .avatar-uploader .el-upload--picture-card {
        width: 80px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .el-icon-plus {
        width: 30px;
        height: 30px;
        position: relative;
    }

    .el-icon-plus:before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

    }

    .el-upload-list--picture-card .el-upload-list__item {
        width: 80px !important;
        height: 80px !important;
        margin: 0 0 0 8px !important;

    }

    .el-upload-list--picture-card {
        max-width: 280px;
        float: right;
        flex-direction: row-reverse;

    }

    #write-content>div>textarea {
        max-width: 570px;
        min-width: 570px;
        min-height: 80px;
        background-color: rgba(243, 237, 237, 0.272);

    }

    /* #write-content button::before{
        content: '';
        clear: both;

    } */
    #write-content button {
        width: 80px;
        height: 30px;
        background-color: rgb(50, 114, 225);
        margin-bottom: 10px;
        border-radius: 6px;
        font-weight: bold;
        color: rgb(176, 173, 173);
        right: 0;
        left: 0;
    }

    #autordata{
        width: 570px;
        height: 6rem;
    }
    .headimg{
        width:4rem;
        height: 4rem;
    }
    #talkimg{
        /* background-color: blue; */
        width: 570px;
        display: flex;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;

    }
    #talkimg>span:last-child {
        display: flex;
    }
    #talkimg>span>li{
        /* width: 4rem;
        height: 4rem; */
        position: relative;

    }
    #talkimg>span>li>.act {
        position: absolute;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: rgba(202, 184, 184, 0.8);
        z-index: 2;
    }
    /* .headimg {
        width: 3rem;
        height: 3rem;
    } */

    #talkimg>span>li>label>.acti {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1.5rem;
        height: 1.5rem;
        background-image: url("../assets/images/gou.png");
        background-size: 100% 100%;

    }



    /* button.ck.ck-button.ck-off.ck-button_with-text.ck-dropdown__button */
</style>